<!--  客资收集 弹出层-->
<script src="{$_G['URL']['LOTTERY_CSS']}lottery/js/layer/layer.js"></script>
<style>
    .custombg {
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, .6);
        z-index: 100;
        width: 100%;
        height: 100%;
        display: none;
    }
    .grayBox {
        position: fixed;
        z-index: 101;
        width: 100%;
        bottom: -120%;
        /*bottom: 0;*/
    }
    .payForm{
        background: #ffffff;
        /*padding: 0.28rem 0.32rem 0;*/
        border-radius: 0.32rem 0.32rem 0 0;
        /* margin: 0.36rem 0.32rem 0.32rem; */
        box-sizing: border-box;
        max-height: 10rem;
        overflow: auto;
        position: relative;
    }
    .payForm > h3{
        line-height: .48rem;
        color: #fff;
        font-size: .32rem;
        position: sticky;
        top: 0;
        padding: 0.28rem 0.32rem 0.2rem;
        border-radius: 0.32rem 0.32rem 0 0 ;
        background: linear-gradient(90deg, #FF8E0D -4.33%, #FF5005 96.22%);
        box-shadow: 0 1px 4px rgba(0,0,0,0.5);
        z-index: 1;
    }
    .payForm  ul {
        list-style: none;
        padding: 0 0.32rem;
    }
    .payForm  #customForm > li {
        overflow: hidden;
        padding: 0.3rem 0;
        border-bottom: 1px solid #E4E5E7;
        display: flex;
    }
    .payForm  #customForm > li p {
        float: left;
        font-size: .28rem;
        line-height: .36rem;
        color: #666666;
        width: 1.75rem;
    }
    .payForm  #customForm > li input {
        float: left;
        box-sizing: border-box;
        padding: 0;
        height: 0.36rem;
        font-size: .28rem;
        color: #222222;
        outline: none;
        border: none;
    }
    .choseSlide{.png
        float: left;
        background: url("https://css2020.yixuan.net/2020css/yx2020/images/selectIcon.png") right center no-repeat;
        padding-right: 0.3rem;
        background-size: 0.2rem auto;
        color: #999999;
    }
    .choseSlide input {
        width: 0;
        opacity: 0;
    }
    .choseSex{
        float: left;
        overflow: hidden;
    }
    /* .choseSex span{
        float: left;
        display: block;
        background: url("https://css2020.yixuan.net/2020css/yx2020/images/check.png") left center no-repeat;
        background-size: 0.32rem auto;
        padding-left: 0.48rem;
        padding-right: 0.48rem;
        color: #999999;
        font-size: .28rem;
    } */
    .moreChose{
        float: left;
        overflow: hidden;
        width: calc(100% - 1.75rem);
    }
    /* .moreChose span{
        margin-bottom: 0.2rem;
        float: left;
        display: block;
        background: url("https://css2020.yixuan.net/2020css/yx2020/images/check.png") left center no-repeat;
        background-size: 0.32rem auto;
        padding-left: 0.48rem;
        padding-right: 0.48rem;
        margin-right: 0.48rem;
        color: #999999;
        font-size: .28rem;
    } */
    .choseSelect{
        z-index: 999;
        position: fixed;
        bottom: -120%;
        width: 100%;
        left: 0;
        background: #ffffff;
        border-radius: 0.32rem 0.32rem 0 0;
    }
    .choseSelect li {
        text-align: center;
        border-bottom: 1px solid #E4E5E7;
        font-size: .32rem;
        line-height: 1.2rem;
    }
    .choseSelect .closeChose {
        display: block;
        border-top: 0.2rem solid #F3F4F6;
        line-height: 1.2rem;
        font-size: .32rem;
        color: #666666;
        text-align: center;
    }
    .choseSex span.cur{
        background: url("https://css2020.yixuan.net/2020css/yx2020/images/checked.png") left center no-repeat;
        background-size: 0.32rem auto;
        color: #222222;
    }
    .moreChose span.cur{
        background: url("https://css2020.yixuan.net/2020css/yx2020/images/checked.png") left center no-repeat;
        background-size: 0.32rem auto;
        color: #222222;
    }
    .radio_wraper,.checkbox_wraper,.checkbox_wraper1 {
        box-sizing: border-box;
        margin: 0 8px 8px 0;
        padding: 0;
        color: #000000d9;
        font-size: 14px;
        font-variant: tabular-nums;
        line-height: 1.5715;
        list-style: none;
        font-feature-settings: "tnum","tnum";
        position: relative;
        display: inline-flex;
        align-items: baseline;
        cursor: pointer;
    }
    .checkbox_wraper {
        display: block;
    }
    .checkbox_wraper1{
        display: block;
    }
    .radio_wraper .radios {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        color: #000000d9;
        font-size: 14px;
        font-variant: tabular-nums;
        line-height: 1.5715;
        list-style: none;
        font-feature-settings: "tnum","tnum";
        position: relative;
        top: 0.2em;
        display: inline-block;
        outline: none;
        cursor: pointer;
    }
    .checkbox_wraper .checkboxes {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        color: #000000d9;
        font-size: 14px;
        font-variant: tabular-nums;
        line-height: 1.5715;
        list-style: none;
        font-feature-settings: "tnum","tnum";
        position: relative;
        top: 0.2em;
        display: inline-block;
        outline: none;
        cursor: pointer;
    }
    .checkbox_wraper1 .checkboxes {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        color: #000000d9;
        font-size: 14px;
        font-variant: tabular-nums;
        line-height: 1.5715;
        list-style: none;
        font-feature-settings: "tnum","tnum";
        position: relative;
        top: 0.2em;
        display: inline-block;
        outline: none;
        cursor: pointer;
    }
    .radio_wraper > .content{
        padding: 0 8px;
    }
    .checkbox_wraper > content {
        padding: 0 8px;
    }
    .checkbox_wraper1 > content {
        padding: 0 8px;
    }
    .radio_wraper .radios > span {
        position: relative;
        top: 0;
        left: 0;
        display: block;
        width: 16px;
        height: 16px;
        background: url("https://css2020.yixuan.net/2020css/yx2020/images/check.png") left center no-repeat;
        background-size: 0.32rem auto;
        transition: all .3s;
    }
    .checkbox_wraper .checkboxes > span {
        position: relative;
        top: 0;
        left: 0;
        display: block;
        width: 16px;
        height: 16px;
        background: url("https://css2020.yixuan.net/2020css/yx2020/images/check.png") left center no-repeat;
        background-size: 0.32rem auto;
        transition: all .3s;
    }
    .checkbox_wraper1 .checkboxes > span {
        position: relative;
        top: 0;
        left: 0;
        display: block;
        width: 16px;
        height: 16px;
        background: url("https://css2020.yixuan.net/2020css/yx2020/images/check.png") left center no-repeat;
        background-size: 0.32rem auto;
        transition: all .3s;
    }
    .radio_wraper .radios > span.cur {
        background: url("https://css2020.yixuan.net/2020css/yx2020/images/checked.png") left center no-repeat;
        background-size: 0.32rem auto;
        color: #222222;
    }
    .checkbox_wraper .checkboxes > span.cur {
        background: url("https://css2020.yixuan.net/2020css/yx2020/images/checked.png") left center no-repeat;
        background-size: 0.32rem auto;
        color: #222222;
    }
    .checkbox_wraper1 .checkboxes > span.cur {
        background: url("https://css2020.yixuan.net/2020css/yx2020/images/checked.png") left center no-repeat;
        background-size: 0.32rem auto;
        color: #222222;
    }
    .radio-input,.checkbox-input {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        cursor: pointer;
        opacity: 0;
    }
    #select_screen {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 10;
        display: none;
    }
    .customform_bottom {
        /*display: flex;*/
        /*justify-content: center;*/
        /*align-items: center;*/
        padding: 0 .32rem .4rem;
    }
    .customform_bottom .customform_btn {
        font-size: .28rem;
        display: block;
        background: linear-gradient(90deg, #FF8E0D -4.33%, #FF5005 96.22%);
        box-shadow: 0px 5px 16px rgba(255, 93, 6, 0.3);
        margin: .32rem auto 0;
        color: #ffffff;
        line-height: .8rem;
        text-align: center;
        border-radius: .8rem;
    }
</style>
<div class="custombg"></div>
<div class="grayBox">
    <div class="payForm">
        <h3>请填写信息</h3>
        <ul>
            <form id="customForm">
                {loop $other_form['info'] $row}
                {if $row['mode']==0 || $row['mode']==8}
                <!--                //文本-->
                <li data-mode="{$row['mode']}" data-name="{$row['name']}">
                    <p>{$row['name']}</p>
                    <input type="text" name="{$row[input_name]}" placeholder="请输入{$row['name']}" value="{$row['input_value']}" />
                </li>
                {elseif $row['mode']==1}
                <!--            数字-->
                <li data-mode="{$row['mode']}" data-name="{$row['name']}">
                    <p>{$row['name']}</p>
                    <input type="number" name="{$row[input_name]}" placeholder="请填写{$row['name']}" value="{$row['input_value']}" />
                </li>
                {elseif $row['mode']==6}
                <!--            电话-->
                <li data-mode="{$row['mode']}" data-name="{$row['name']}">
                    <p>{$row['name']}</p>
                    <input type="number" name="{$row[input_name]}" placeholder="请填写{$row['name']}" value="{$row['input_value']}" />
                </li>
                {elseif $row['mode']==7}
                <!--            日期-->
                <li data-mode="{$row['mode']}" data-name="{$row['name']}">
                    <p>{$row['name']}</p>
                    <input type="date" name="{$row[input_name]}" placeholder="请填写{$row['name']}" value="{$row['input_value']}" />
                </li>
                {elseif $row['mode']==2}
                <!--            下拉-->
                <li data-mode="{$row['mode']}" data-name="{$row['name']}">
                    <p>{$row['name']}</p>
                    <div class="choseSlide">
                        <input class="info_input" type="text" name="{$row[input_name]}" value="{$row['input_value']}">
                        <span class="info">
                                <?php echo $row['input_value']?$row['input_value']:'请选择'?>
                            </span>
                        <div class="choseSelect">
                            <ul>
                                {loop $row['vals'] $val}
                                <li>{$val}</li>
                                {/loop}
                            </ul>
                            <span class="closeChose">取消</span>
                        </div>
                    </div>
                </li>
                {elseif $row['mode']==3}
                <!--            单选-->
                <li data-mode="{$row['mode']}" data-name="{$row['name']}">
                    <p>{$row['name']}</p>
                    <div class="choseSex">
                        {loop $row['vals'] $row1}
                        <span class="radio_wraper">
                                <span class="radios">
                                    <input name="{$row[input_name]}" type="radio" value="{$row1}" class="radio-input" {php echo $row['input_value'] ? 'checked="checked"' : '';}>
                                    <span {php echo $row['input_value'] ? 'class="cur"' : '';}></span>
                                </span>
                        <span class="content">{$row1}</span>
                        </span>
                        {/loop}

                    </div>
                </li>
                {elseif $row['mode']==4}
                <!--            多选-->
                <li data-mode="{$row['mode']}" data-name="{$row['name']}">
                    <p>{$row['name']}</p>
                    <div class="moreChose" data-min="{$row['vals_min']}" data-max="{$row[vals_max]}">
                        {loop $row['vals'] $v}
                        <span class="checkbox_wraper">
                                    <span class="checkboxes">
                                        <input name="{$row[input_name]}" data-uncancel="{php echo $v['ischecked'] == 1 ? 'uncancel' : '';}" type="checkbox" value="{$v['name']}" class="checkbox-input" {php echo $v['ischecked'] == 1 ? 'checked="checked"' : '';}>
                                        <span {php echo $v['ischecked'] == 1 ? 'class="cur"' : '';}></span>
                                    </span>
                        <span class="content">{$v['name']}</span>
                        </span>
                        {/loop}
                    </div>
                </li>
                {elseif $row['mode']==5}
                <!--            多选分类-->
                <li data-mode="{$row['mode']}" data-name="{$row['name']}">
                    <p>{$row['name']}</p>
                    <div class="moreChose" data-min="{$row['vals_min']}" data-max="{$row[vals_max]}" style="display: flex;flex-direction: column;">
                        {loop $row['vals'] $v}
                        <div class="cate_items" data-min="{$v['cate_min']}" data-max="{$v['cate_max']}" data-name="{$v['cate_name']}">
                            <div style="text-align: center;">{$v['cate_name']}{if $v['cate_max']!=$v['cate_min']}可选 {$v['cate_min']}-{$v['cate_max']}{/if}</div>
                            <div data-min="{$v['cate_min']}" data-max="{$v['cate_max']}" data-name="{$v['cate_name']}" style="display: flex;margin-top: 4px;box-sizing: border-box;justify-content: space-between;flex-wrap:wrap;">
                                {loop $v['cate_items'] $k1 $v1}
                                <span class="checkbox_wraper1" style="width: 40%;box-sizing: border-box;text-align: center;">
                                    <span class="checkboxes">
                                        <input name="{$row[input_name]}" type="checkbox" value="{$v1['name']}" data-uncancel="{php echo $v1['ischecked'] == 1 ? 'uncancel' : '';}" class="checkbox-input" {php echo $v1['ischecked']==1 ? 'checked="checked"' : '';}>
                                        <span {php echo $v1['ischecked'] == 1 ? 'class="cur"' : '';}></span>
                                    </span>
                                    <span class="content">{$v1['name']}</span>
                                </span>
                                {/loop}
                            </div>
                        </div>
                        {/loop}
                    </div>
                </li>
                {else}
                {/if}
                {/loop}
            </form>
        </ul>
        <div class="customform_bottom">
            <div class="customform_btn">提交</div>
        </div>
    </div>
    <!--下拉选择-->
    <div id="select_screen"></div>
</div>
<script type="text/javascript">

    function CustomForm() {
        // 初始化
        this.from = null;
        this.validateInfo = '';
        this.init = function () {
            this.form = $('#customForm');
            this.checkSingle();
            this.checkMultiple();
            this.checkCateMulite();
            this.checkSelect();
            $('.custombg').click(() => {
                this.hide();
            })
            this.submit();
        }
        // 单选
        this.checkSingle = function() {
            $('.choseSex .radio_wraper').click(function() {
                $(this).siblings().find('input[type=radio]').removeAttr('checked');
                $(this).siblings().find('input[type=radio]').next().removeClass('cur');
                const radio = $(this).find('input[type=radio]');
                radio.attr('checked', 'checked');
                radio.next().addClass('cur');
            })
        }
        // 多选
        this.checkMultiple = function () {
            $('.moreChose .checkbox_wraper').click(function() {
                const max = $(this).parent().data('max');
                const min = $(this).parent().data('min');
                const checkboxAllChecked = $(this).parent().find('input[checked]');
                const checkbox = $(this).find('input[type=checkbox]');
                if(!checkbox.data('uncancel')) {
                    if(checkboxAllChecked.length >= max) {
                        if(checkbox.attr('checked')) {
                            checkbox.removeAttr('checked');
                            checkbox.next().removeClass('cur');
                        } else {
                            layer.msg(`最多可选择${max}项`);
                        }

                    } else {
                        if(checkbox.attr('checked')) {
                            checkbox.removeAttr('checked');
                            checkbox.next().removeClass('cur');
                        } else {
                            checkbox.attr('checked', 'checked');
                            checkbox.next().addClass('cur');
                        }
                    }

                }

            })
        }
        // 多选分类
        this.checkCateMulite = function () {
            $('.moreChose .checkbox_wraper1').click(function() {
                const max = $(this).parent().parent().parent().data('max');
                const min = $(this).parent().parent().parent().data('min');

                const cate_max = $(this).parent().data('max');
                const cate_min = $(this).parent().data('min');
                const cate_name = $(this).parent().data('name');
                const checkboxAllChecked = $(this).parent().parent().parent().find('input[checked]');
                const checkbox = $(this).find('input[type=checkbox]');
                if(!checkbox.data('uncancel')) {
                    if(checkboxAllChecked.length >= max) {
                        if(checkbox.attr('checked')) {
                            checkbox.removeAttr('checked');
                            checkbox.next().removeClass('cur');
                        } else {
                            layer.msg(`最多可选择${max}项`);
                        }

                    } else {
                        if(checkbox.attr('checked')) {
                            checkbox.removeAttr('checked');
                            checkbox.next().removeClass('cur');
                        } else {
                            var temp_item_checkboxAllChecked = $(this).parent().find('input[checked]');
                            if (temp_item_checkboxAllChecked.length >= cate_max){
                                if(checkbox.attr('checked')) {
                                    checkbox.removeAttr('checked');
                                    checkbox.next().removeClass('cur');
                                } else {
                                    layer.msg(`${cate_name}最多可选择${cate_max}项`);
                                }
                            }else{
                                checkbox.attr('checked', 'checked');
                                checkbox.next().addClass('cur');
                            }
                        }
                    }

                }

            })
        }
        // 下拉
        this.checkSelect = function () {
            //自定义下拉
            $('.choseSlide').click(function(){
                $('#select_screen').fadeIn();
                $(this).find('.choseSelect').animate({'bottom': '0'}, 500);
                $(this).addClass('chosed')
            })
            $('.closeChose').click(function(event){
                event.stopPropagation();
                $(this).parents('.choseSelect').animate({'bottom':'-120%'},500);
                $(this).parents('.choseSlide').removeClass('chosed')
                $('#select_screen').fadeOut();
            })
            $('#select_screen').click(function() {
                $(this).fadeOut();
                $('.choseSlide.chosed').find('.choseSelect').animate({'bottom':'-120%'},500);
                $('.choseSlide.chosed').removeClass('chosed');
            })
            $('.choseSelect li').click(function(event){
                event.stopPropagation();
                var choseVal = $(this).html();
                $('#select_screen').fadeOut();
                $(this).parents('.choseSelect').animate({'bottom':'-120%'},500);
                $(this).parents('.choseSlide').find('.info').html(choseVal);
                $(this).parents('.choseSlide').find('.info_input').val(choseVal);
                $(this).parents('.choseSlide').removeClass('chosed')
            })
        }
        // 表单验证
        this.validate = function () {
            const formInputs = this.form.find('input');
            const hasValidated = [];
            this.validateInfo = '';
            const validate = (index, element) => {
                const mode = $(element).parents('li').data('mode');
                const name = $(element).parents('li').data('name');
                const input_name = $(element).attr('name');
                if ( !~hasValidated.indexOf(input_name) ) {
                    hasValidated.push(input_name);
                    if (mode == 0 || mode == 1 || mode == 2 || mode == 7 || mode == 8) {
                        const val = $(element).val();
                        if(!val) {
                            this.validateInfo = `${name}不能为空`;
                            return false;
                        }
                    } else if ( mode == 6 ) {
                        // 验证电话
                        const val = $(element).val();
                        if(!val) {
                            this.validateInfo = `${name}不能为空`;
                            return false;
                        }
                        if (!isMobile(val)) {
                            this.validateInfo = `${name}格式不正确`;
                            return false;
                        }
                    } else if ( mode == 3 ) {
                        // 验证单选
                        const radio_checked = $(element).parents('.choseSex').find('input[checked]');
                        if(radio_checked.length<=0 ) {
                            this.validateInfo = `${name}未选择`;
                            return false;
                        }
                    } else if ( mode == 4 ) {
                        // 验证多选
                        const min = $(element).parents('.moreChose').data('min');
                        const max = $(element).parents('.moreChose').data('max');
                        const checkbox_checked = $(element).parents('.moreChose').find('input[checked]');

                        if(min && checkbox_checked.length < min) {
                            this.validateInfo = `${name}最少选择${min}项`;
                            return false;
                        }
                        if (max && checkbox_checked.length > max) {
                            this.validateInfo = `${name}最多选择${max}项`;
                            return false;
                        }
                    } else if ( mode == 5 ) {
                        // 验证多选分类
                        const min = $(element).parents('.moreChose').data('min');
                        const max = $(element).parents('.moreChose').data('max');
                        const checkbox_checked = $(element).parents('.moreChose').find('input[checked]');

                        const cate_min = $(element).parents('.cate_items').data('min');
                        const cate_max = $(element).parents('.cate_items').data('max');
                        const cate_name = $(element).parents('.cate_items').data('name');
                        const cate_checkbox_checked = $(element).parents('.cate_items').find('input[checked]');

                        if(min && checkbox_checked.length < min) {
                            this.validateInfo = `${name}最少选择${min}项`;
                            return false;
                        }
                        if (max && checkbox_checked.length > max) {
                            this.validateInfo = `${name}最多选择${max}项`;
                            return false;
                        }

                        if(cate_min && cate_checkbox_checked.length < cate_min) {
                            this.validateInfo = `${cate_name}最少选择${cate_min}项`;
                            return false;
                        }
                        if (cate_max && cate_checkbox_checked.length > cate_max) {
                            this.validateInfo = `${cate_name}最多选择${cate_max}项`;
                            return false;
                        }
                    }
                }

            }
            const isMobile = (mobile) =>{
                if(mobile.length!=11){
                    return false;
                }else{
                    var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[0-9]{1})|(18[0-9]{1})|(19[0-9]{1}))+\d{8})$/;
                    if (!myreg.test(mobile)) {
                        return false;
                    }else{
                        return true;
                    }
                }
            }
            // const hasValue = (val) => {
            //     return val ? true : false;
            // }
            if ( formInputs.length > 0 ) {
                $.each(formInputs, validate)
            }
            // return validateInfo;
        }
        // 获取form值
        this.getFormValue = function () {
            this.validate();
            if(this.validateInfo) {
                layer.msg(this.validateInfo);
                return false;
            } else {
                const formArray = this.form.serializeArray();
                const formObject = serializeObject(formArray);
                return formObject;
            }

        }
        // 点击按钮提交
        this.submit = function () {
            var workerid = "{$_P['workerid']}";
            var that = this;
            $(".customform_btn").attr("disabled","true");
            $('.customform_btn').click(() => {
                const data = this.getFormValue();
                if (data) {
                    console.log(data);
                    $.ajax({
                        method:"POST",
                        dataType:'json',
                        url:"/{php echo createMobileUrl('Otherform', array('themeid'=>$themeid));}",
                        data:{filed:data,workerid:workerid},
                        success:function(res){
                            layer.msg(res.msg);
                            that.hide();
                        }
                    })
                    $(".customform_btn").attr("disabled","false");
                }
                window.location.reload();
            })

        }
        // 显示
        this.show = function() {
            $('.custombg').fadeIn();
            $('.grayBox').animate({'bottom': 0}, 500);
            $('body').css({height: '100%', overflow: 'hidden'});
        }
        // 隐藏
        this.hide = function() {
            $('.custombg').fadeOut();
            $('.grayBox').animate({'bottom': '-120%'}, 500);
            $('body').removeAttr('style')
            const data = this.getFormValue();
            if (data){
                window.location.reload();
            }
        }
        // 序列化表单
        function serializeObject(array) {
            var result = {};
            var extend = function(i, element) {
                var node = result[element.name];
                if ('undefined' !== typeof node && node !== null) {
                    if ($.isArray(node)) {
                        node.push(element.value);
                    } else {
                        result[element.name] = [node, element.value];
                    }
                } else {
                    result[element.name] = element.value;
                }
            }
            $.each(array, extend);
            return result;
        }
        this.init();
    }
    const customForm = new CustomForm();
</script>